<template>
    <div ref="toolbox" class="toolbox-float-btn" @mouseover="showTooltip = true" @mouseleave="showTooltip = false"
        @click="handleClick" :style="{ top: position.top + 'px', left: position.left + 'px' }" @mousedown="startDrag"
        @mouseup="endDrag">
        <i class="fa fa-cogs"></i>
        <div v-if="showTooltip" class="tooltip">全局工具箱</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showTooltip: false, // 控制提示文本显示与否
            position: { top: 200, left: 200 }, // 初始位置
            isDragging: false, // 是否正在拖动
            offset: { x: 0, y: 0 }, // 鼠标偏移量
            dragThreshold: 5, // 拖动的最小阈值，避免误触
            isClick: false, // 是否为点击事件
        };
    },
    mounted() {
        // 从 localStorage 获取位置，初始化位置
        const savedPosition = JSON.parse(localStorage.getItem('toolbox-position'));
        if (savedPosition) {
            this.position = savedPosition;
        }
    },
    methods: {
        // 鼠标按下时开始拖动
        startDrag(event) {
            this.isDragging = true;
            this.isClick = true; // 假设是点击事件
            this.offset.x = event.clientX - this.position.left;
            this.offset.y = event.clientY - this.position.top;
            document.addEventListener('mousemove', this.onDrag);
        },
        // 鼠标移动时更新位置
        onDrag(event) {
            if (this.isDragging) {
                const deltaX = event.clientX - this.offset.x;
                const deltaY = event.clientY - this.offset.y;
                // 如果拖动距离大于阈值，认为是拖拽而非点击
                if (Math.abs(deltaX) > this.dragThreshold || Math.abs(deltaY) > this.dragThreshold) {
                    this.isClick = false;
                }
                this.position.left = deltaX;
                this.position.top = deltaY;
            }
        },
        // 鼠标松开时结束拖动
        endDrag() {
            this.isDragging = false;
            document.removeEventListener('mousemove', this.onDrag);
            // 保存拖动后的位置
            localStorage.setItem('toolbox-position', JSON.stringify(this.position));
        },
        // 处理点击事件，只有在不是拖拽的情况下才打开窗口
        handleClick() {
            if (this.isClick) {
                this.openNewWindow();
            }
            this.isClick = false; // 重置点击标志，防止误触
        },
        openNewWindow() {
            this.$auditLogApi.getClusterConnectUrl().then(res => {
                if (res && res.code === 200) {
                    window.open(res.data);
                } else {
                    this.$message.error('获取工具箱链接失败');
                }
            });
        }
    }
};
</script>

<style scoped>
.toolbox-float-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    background-color: #ff5f00;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
}

.toolbox-float-btn:hover {
    transform: scale(1.1);
}

.toolbox-float-btn i {
    font-size: 30px;
    color: white;
}

.tooltip {
    position: absolute;
    top: -40px;
    left: 70px;
    display: flex;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 10;
}

.tooltip-text {
    margin-right: 5px;
}

.tooltip i {
    font-size: 16px;
    margin-left: 5px;
}
</style>